<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>Farrer Drive - Gallery</title>

        <!-- Mobile viewport optimisation -->
        <meta name="viewport" content="width=1280">
        <link href="css/styles.css" rel="stylesheet" type="text/css"/>
        <script src="lib/jquery-1.7.1.min.js"></script>
        <script src="js/custom.js"></script>
        <link href="//vjs.zencdn.net/4.2/video-js.css" rel="stylesheet">
        <script src="//vjs.zencdn.net/4.2/video.js"></script>
    </head>
    <body>
        <div class="wrapper">
            <div id="header">
                <img id="logo" onclick="window.location.href = './'" src="images/logo.gif" />
            </div>
            <div id="main">

                <div class="slide-container">
                    <div class="menu">
                        <ul>
                            <li>
                                <span><a onclick="return movePage(this)" href="./">Home</a></span>
                            </li>
                            <li>
                                <span><a onclick="return movePage(this)" href="design.html">Design</a></span>
                            </li>
                            <li>
                                <span><a onclick="return movePage(this)" href="location.html">Location</a></span>
                            </li>
                            <li>
                                <span><a onclick="return movePage(this)" href="gardens.html">The Gardens</a></span>
                            </li>
                            <li>
                                <span><a onclick="return movePage(this)" href="facilities.html">Facilities</a></span>
                            </li>
                            <li>
                                <span><a onclick="return movePage(this)" href="interior.html">Interior</a></span>
                            </li>
                            <li>
                                <span><a onclick="return movePage(this)" href="floorplans.html">Floor Plans</a></span>
                            </li>
                            <li id="menu-active">
                                <span><a onclick="return movePage(this)" href="gallery.html">Gallery</a></span>
                            </li>
                            <li>
                                <span><a onclick="return movePage(this)" href="contactus.html">Contact us</a></span>
                            </li>
                            <li>
                                <span><a onclick="return movePage(this)" href="developer.html">Developer</a></span>
                            </li>
                        </ul>
                    </div>
                    <!--<div class="slide-item" id="slide-top">
                    </div>
                    <div class="slide-item" id="slide-bottom">
                    </div>
                    -->
                    <div class="images-container gallery-images">
                        <img class="flexible" onclick="showLightBox();
						$('.light-box-content').hide();
						$('.gallery1').show();" alt="Farrer Drive" src="images/gallery/gallery_video.jpg"　/> 
                        <img class="flexible" onclick="showLightBox();
						$('.light-box-content').hide();
						$('.gallery2').show();" alt="Farrer Drive" src="images/gallery/gallery_flythrough.jpg"　/>
                        <img class="flexible" onclick="showLightBox();
						$('.light-box-content').hide();
						$('.gallery3').show();" alt="Farrer Drive" src="images/gallery/gallery_showflat.jpg"　/>
                        <img class="flexible" onclick="showLightBox();
						$('.light-box-content').hide();
						$('.gallery4').show();" alt="Farrer Drive" src="images/gallery/gallery_download.jpg"　/>
                    </div>
                </div>
            </div>
            <div id="footer" style="display: none;">
                <img src="images/footer-text.png" style="float: right; width: 70%; margin-right: 44px; margin-top: 36px;"/>
            </div>
        </div>
        <div class="light-box">
            <div class="light-box-background" onclick="hideLightBox()">

            </div>
            <div class="light-box-content gallery1" style="text-align: left;background: white;padding: 10px;">
                <div style="z-index: 9999; right: -18px; top: -19px;" onclick="hideLightBox();" class="close_video"></div>
                <video id="example_video_1" class="video-js vjs-default-skin"
                       controls preload="auto" width="100%" height="500px"
                       poster="http://video-js.zencoder.com/oceans-clip.png"
                       data-setup='{"example_option":true}'>
                    <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
                </video>
            </div>
            <div class="light-box-content gallery2" style="text-align: left;background: white;padding: 10px;">
                <div style="z-index: 9999; right: -18px; top: -19px;" onclick="hideLightBox();" class="close_video"></div>
                <video id="example_video_1" class="video-js vjs-default-skin"
                       controls preload="auto" width="100%" height="500px"
                       poster="http://video-js.zencoder.com/oceans-clip.png"
                       data-setup='{"example_option":true}'>
                    <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
                </video>
            </div>
            <div class="light-box-content gallery3" style="text-align: left;background: white;padding: 10px;">
                <div style="z-index: 9999; right: -18px; top: -19px;" onclick="hideLightBox();" class="close"></div>
                text here
            </div>
            <div class="light-box-content gallery4" style="text-align: left;background: white;padding: 10px;">
                <div style="z-index: 9999; right: -18px; top: -19px;" onclick="hideLightBox();" class="close"></div>
                text here
            </div>
        </div>
    </body>
</html>
